* {
    margin: 0;
    padding: 0;
}

body {
    color: white;
    background-image: url(../../assets/img/mode_background.png);
    background-size: cover;
}

.up_back {
    width: 100%;
    height: 260px;
    position: static;
    // background-color: rgb(97, 95, 223);
    border-bottom-left-radius: 70% 15%;
    border-bottom-right-radius: 70% 15%;
    .title {
        width: 200px;
        margin: 0 auto;
        font-size: 18px;
        text-align: center;
        padding-top: 25px;
    }
    .desc {
        width: 80%;
        margin: 0 auto;
        font-size: 12px;
        margin-top: 15px;
    }
}

.mode_parent {
    width: 100%;
    height: 240px;
    top: 190px;
    position: absolute;
    .img_mode {
        width: 96%;
        height: 100px;
        margin: 0 auto;
        .mode_left {
            float: left;
            width: 200px;
            height: 100px;
            margin-left: 30px;
            border-radius: 10px;
        }
        .mode_middle {
            float: left;
            width: 200px;
            height: 100px;
            margin-left: 30px;
            border-radius: 10px;
        }
        .mode_right {
            float: left;
            width: 200px;
            height: 100px;
            margin-left: 30px;
            border-radius: 10px;
        }
    }
    .btn_mode {
        width: 90%;
        height: 50px;
        margin: 0 auto;
        margin-top: 35px;
        .mode_left_btn {
            float: left;
            width: 200px;
            height: 43px;
            margin-left: 10px;
            border-radius: 10px;
        }
        .mode_right_btn {
            float: left;
            width: 430px;
            height: 43px;
            margin-left: 25px;
            border-radius: 10px;
        }
    }
}

.board_column {
    width: 100%;
    position: fixed;
    bottom: 0;
    margin-left: 15px;
}

.left_back {
    height: 30px;
    float: left;
    margin-top: 20px;
    margin-left: 25px;
}